<template>
  <div class="container">
    <div class="register-container">
      <div class="right-panel">
        <div class="form-header">
          <h2>创建账号</h2>
          <p>加入我们，开启您的创作之旅</p>
        </div>
        <el-form :model="form" :rules="rules" ref="formRef" class="register-form">
          <div class="form-group">
            <label for="username"><i class="fas fa-user"></i></label>
            <el-input v-model="form.username" placeholder="用户名" />
          </div>
          <div class="form-group">
            <label for="nickname"><i class="fas fa-smile"></i></label>
            <el-input v-model="form.nickname" placeholder="昵称" />
          </div>
          <div class="form-group">
            <label for="email"><i class="fas fa-envelope"></i></label>
            <el-input v-model="form.email" placeholder="电子邮箱" />
          </div>
          <div class="form-group">
            <label for="password"><i class="fas fa-lock"></i></label>
            <el-input v-model="form.password" type="password" placeholder="密码" />
          </div>
          <div class="form-group">
            <label for="confirm-password"><i class="fas fa-lock"></i></label>
            <el-input v-model="form.confirmPassword" type="password" placeholder="确认密码" />
          </div>
          <el-button type="primary" @click="handleRegister" :loading="loading" class="register-btn">
            注册
          </el-button>
          <div class="social-login">
            <p>或使用社交账号登录</p>
            <div class="social-icons">
              <a href="#" class="social-icon"><i class="fab fa-weixin"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-qq"></i></a>
              <a href="#" class="social-icon"><i class="fab fa-weibo"></i></a>
            </div>
          </div>
        </el-form>
        <div class="login-link">
          <p>已有账号？<router-link to="/login">立即登录</router-link></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { auth } from '@/api'

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const form = reactive({
  username: '',
  nickname: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (form.confirmPassword !== '') {
      formRef.value?.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.password) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePass, trigger: 'blur' },
    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, validator: validatePass2, trigger: 'blur' }
  ]
}

const handleRegister = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true
      try {
        const { confirmPassword, ...registerData } = form
        await auth.register(registerData)
        ElMessage.success('注册成功')
        router.push('/login')
      } catch (error) {
        console.error(error)
        ElMessage.error(error.response?.data?.message || '注册失败')
      } finally {
        loading.value = false
      }
    }
  })
}
</script>

<style scoped>
:global(html), :global(body), :global(#app) {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
  min-height: 100vh;
  min-width: 100vw;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.container {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  min-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}

.register-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  min-height: 600px;
  width: 500px;
  max-width: 95vw;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.register-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.right-panel {
  flex: 1;
  padding: 50px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-header {
  margin-bottom: 40px;
  text-align: center;
}

.form-header h2 {
  font-size: 28px;
  color: #409EFF;
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.form-header p {
  color: #606266;
  font-size: 16px;
}

.register-form {
  width: 100%;
}

.form-group {
  position: relative;
  margin-bottom: 25px;
}

.form-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #909399;
  z-index: 2;
}

.form-group :deep(.el-input__wrapper) {
  padding-left: 45px;
  border-radius: 8px;
  background-color: #f5f7fa;
  transition: all 0.3s;
  box-shadow: none;
  border: 1px solid #dcdfe6;
}

.form-group :deep(.el-input__wrapper:hover) {
  border-color: #c0c4cc;
}

.form-group :deep(.el-input__wrapper.is-focus) {
  border-color: #409EFF;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}

.form-group :deep(.el-input__inner) {
  height: 45px;
}

.register-btn {
  width: 100%;
  padding: 15px;
  height: 45px;
  border-radius: 8px;
  background: linear-gradient(to right, #409EFF, #36D1DC);
  border: none;
  margin-top: 20px;
  transition: all 0.3s;
  font-size: 16px;
  font-weight: 500;
}

.register-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.4);
}

.social-login {
  margin-top: 30px;
  text-align: center;
}

.social-login p {
  color: #606266;
  margin-bottom: 15px;
  font-size: 14px;
  position: relative;
}

.social-login p::before,
.social-login p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 25%;
  height: 1px;
  background-color: #dcdfe6;
}

.social-login p::before {
  left: 0;
}

.social-login p::after {
  right: 0;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f7fa;
  color: #606266;
  transition: all 0.3s;
  text-decoration: none;
}

.social-icon:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #409EFF;
  background-color: #ecf5ff;
}

.login-link {
  margin-top: 25px;
  text-align: center;
}

.login-link p {
  color: #606266;
  font-size: 14px;
}

.login-link a {
  color: #409EFF;
  text-decoration: none;
  font-weight: 600;
  position: relative;
}

.login-link a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #409EFF;
  transition: width 0.3s ease;
}

.login-link a:hover::after {
  width: 100%;
}

@media (max-width: 1000px) {
  .register-container {
    width: 98vw;
    max-width: 98vw;
  }
  .right-panel {
    padding: 30px 20px;
  }
}
@media (max-width: 700px) {
  .register-container {
    width: 100vw;
    min-width: 0;
    max-width: 100vw;
  }
  .right-panel {
    padding: 25px 15px;
  }
}
@media (max-width: 500px) {
  .right-panel {
    padding: 20px 15px;
  }
  .register-container {
    border-radius: 0;
  }
}
</style> 